<template>
  <div class="loginContaintor">
    <search-i></search-i>
    <div class="imgWrap " :class="isChangeCard?'active':''">
      <img class="img1" src="../../assets/static-union_164793255107785e.png" alt="">
    </div>
    <div class="formWrap" v-show="!isChangeCard">
      <van-form class="loginForm">
        <van-cell-group inset>
          <van-field v-model="loginUser.phone" name="用户名" label="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" style="margin-left:-5px" />
          <van-field v-model="loginUser.password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{required:true ,pattern:/^[A-Za-z0-9_%#@.]{6,8}$/,message:'输入密码格式不正确'}]" style="margin-left:-5px" />
        </van-cell-group>
        <div class="text" style="padding:20px">
          <span class="one">遇到问题？</span>
          <span @click="toLogin">快速注册</span>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="danger" :disabled="!loginUser.isAgree" @click="loginIn">
            登录
          </van-button>
        </div>
        <div class="input1">
          <input type="checkbox" v-model="loginUser.isAgree">
          <span>同意《网易严选服务协议》</span>
        </div>
        <div class="other">
          <span>查看其它登录方式></span>
        </div>
      </van-form>

    </div>
    <div class="buttonWrap" v-show="isChangeCard">
      <van-space direction="vertical" fill="true" size="10px">
        <van-button class="button1" type="danger" block @click="changeCard">手机号快捷登录</van-button>
        <van-button class="button1" type="danger" block @click="toRegister">新 用 户 注 册</van-button>
        <div class="bottom">
          <span>
            <img style="width:20px; height:20px;vertical-algin:top " src="../../assets/iconfont/weixin.png" alt="">
            微信
          </span>
          <span class="span1">|</span>
          <span>
            <img style="width:20px; height:20px;vertical-algin:top " src="../../assets/iconfont/QQ.png" alt="">
            QQ
          </span>
          <span class="span1">|</span>
          <span>
            <img style="width:20px; height:20px;vertical-algin:top " src="../../assets/iconfont/weibo.png" alt="">
            微博
          </span>
        </div>
      </van-space>
    </div>
  </div>
</template>

<script lang="ts">
import SearchI from '../../components/SearchI.vue'
export default {
  name: 'Login',
  components:{
    SearchI
  }
};
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { RouterLink, useRouter, useRoute } from 'vue-router';
import { useUserInfoStore } from '../../store/user';
import { userLogMode } from '../../api/api2/model/loginMode';

const router = useRouter();
const route = useRoute();
const userInfoStore = useUserInfoStore();
const isChangeCard = ref(true);
const loginUser = reactive<userLogMode>({
  phone: '',
  password: '',
  isAgree: false
});
const changeCard = () => {
  isChangeCard.value = false;
};
const toRegister = () => {
  router.push('/register');
};
const loginIn = async () => {
  await userInfoStore.postLoginAsync(loginUser);
  router.push(route.query.redirect as string);
};
const toLogin = () => {
  router.push('/register');
};
</script>

<style lang="less" scoped>
.loginContaintor {
  .imgWrap {
    width: 375px;
    height: 45px;
    margin-top: 28px;
    text-align: center;
    &.active {
      margin-top: 100px;
    }
    .img1 {
      height: 45px;
      width: 134px;
    }
  }
  .formWrap {
    width: 375px;
    height: 330px;
    margin-top: 20px;
    .text {
      width: 335px;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      font-size: 12px;
      .one {
        color: #aaa;
      }
    }
    .input1 {
      padding: 20px;
      font-size: 12px;
    }
    .other {
      text-align: center;
      font-size: 14px;
      margin-top: 10px;
    }
  }
  .buttonWrap {
    padding: 0 20px;
    margin-top: 50px;
    .bottom {
      margin-top: 250px;
      text-align: center;
      font-size: 16px;
      color: #aaa;
      .span1 {
        padding: 15px;
        img {
          width: 10px;
          height: 10px;
          vertical-align: bottom;
        }
      }
    }
  }
}
</style>